<template>
	<view>
		<view class="touxiang_box">
			<u-avatar :src="info.avatar" size="160" @click="gocaijian"></u-avatar>
			<view class="ghtx" @click="gocaijian">
				点击更换头像
			</view>
		</view>

		<view class="phone">
			<u-field v-model="info.phone" label="手机号" placeholder="请填写手机号">
			</u-field>

		</view>
		<view class="phone">
			<u-field v-model="info.nickname" label="昵称" placeholder="请填写手机号">
			</u-field>
		</view>
		<view class="save" @click="saveinfo">
			保存
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {},
				path:null,
			};
		},
		created() {
			uni.$on('uAvatarCropper', path => {
				this.info.avatar = path;
				uni.uploadFile({
					url: this.$AJAX_URL + 'index/uploadimg',
					filePath: path,
					name: "file",
					success: (res) => {
						var data = JSON.parse(res.data)
						console.log(data);
						if (data.code === 200) {
							this.path = data.data.url
							this.info.avatar = this.path
						}
					}

				})
			})
		},
		onLoad() {
			uni.getStorage({
				key: 'userinfo',
				success: (res) => {
					this.info = res.data
				}
			})
		},
		methods: {
			gocaijian() {
				this.$u.route({
					// 关于此路径，请见下方"注意事项"
					url: 'pages/caijian/caijian',
					// 内部已设置以下默认参数值，可不传这些参数
					params: {
						// 输出图片宽度，高等于宽，单位px
						destWidth: 300,
						// 裁剪框宽度，高等于宽，单位px
						rectWidth: 200,
						// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
						fileType: 'jpg',
					}
				})
			},
			saveinfo() {
				if (this.$u.test.mobile(this.info.phone)) {
					uni.request({
						url: this.$AJAX_URL + 'my/update_user_info',
						method: 'POST',
						data: {
							uid: this.info.uid,
							nickname: this.info.nickname,
							avatar: this.info.avatar,
							phone: this.info.phone,
							country: this.info.country,
							province: this.info.province,
							city: this.info.city
						},
						success: (res) => {
							console.log(res);
							if (res.data.code === 200) {
								this.$u.toast(res.data.msg)
								this.info.avatar = res.data.data.avatar
								uni.setStorage({
									key: 'userinfo',
									data: this.info
								})
							} else {
								this.$u.toast(res.data.msg)
							}

						},
						fail: (err) => {
							this.$u.toast(ere.errMsg)
						}
					})
				} else {
					this.$u.toast('请输入正确的手机号')
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f7f7f7;
	}

	.touxiang_box {
		height: 308rpx;
		background: #FFFFFF;
		text-align: center;
		padding-top: 40rpx;

		.ghtx {
			text-align: center;
			font-size: 28rpx;
			color: #8F77F3;
			margin-top: 20rpx;
		}
	}

	.phone {
		background-color: #FFFFFF;
		margin-top: 20rpx;
	}

	.save {
		width: 400rpx;
		height: 88rpx;
		background-color: #FF423F;
		text-align: center;
		line-height: 88rpx;
		border-radius: 45rpx;
		position: fixed;
		bottom: 50rpx;
		left: 0;
		right: 0;
		margin: 0 auto;
		font-size: 30rpx;
		color: #FFFFFF;
	}
</style>
